<template>
  <div class="limit">
    <div class="preview">
      <div class="top">
        <img :src="previewImg" alt="">
      </div>
      <div class="box container">
        <div class="item" v-for="item in yugaoList">
          <div class="cont">
            <div class="img">
              <img :src="item.imgsrc" alt="">
            </div>
            <div class="down-box">
              <div class="box-cont">
                <div class="topp">
                  <div class="name">{{item.name}}</div>
                  <p class="p1">￥{{item.price}} / {{item.spec}}</p>
                  <p class="p2"><del>￥{{item.beforeprice}} / {{item.spec}}</del></p>
                </div>
                <div class="downn">
                  {{item.time}} 开抢
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="time-limit">
      <div class="top">
        <img :src="xsms" alt="">
      </div>
      <div class="xsg-box">
        <div class="list" v-for="(item,index) in xsglist">
          <div class="img">
            <img :src="comimgsrc+item.preview">
          </div>
          <div class="down">
            <div class="down-left">
              <div class="name">{{item.name}}</div>
              <div class="price">
                <p><span>{{item.price}}</span>/{{item.unit}} <del>￥{{item.max_price}}/{{item.unit}}</del></p>
              </div>
              <div class="djs">
                <djs @ievent="ievent($event)" v-bind:endtime="{sj:item.deadline,id:index,stock:item.stock}"></djs>
              </div>
            </div>
            <div class="qg-btn" v-show="item.deadline>0 && item.stock>0" @click="qgbtn(item.id)">
              <p>抢<br>购</p>
            </div>
            <div class="qg-btn active" v-show="item.deadline<=0 || item.stock==0">
              <p>抢<br>购</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import previewImg from '@/assets/image/yugao.jpg'
import yg1 from '@/assets/image/yg1.jpg'
import yg2 from '@/assets/image/yg2.jpg'
import xsms from '@/assets/image/xsms.jpg'
import cp1 from '@/assets/image/cp1.jpg';
import cp2 from '@/assets/image/cp2.jpg';
import djs from '@/components/common/djs';
export default {
  name: 'App',
  data(){
    return{
      previewImg,xsms,cp1,cp2,comimgsrc:'http://api.mountainfreshes.com',
      xsglist:[
          // {id:1,imgsrc:cp2,name:"香甜脆梨",price:"9.9",beforeprice:"14.9",spec:"kg",time:1018,stock:12},
          // {id:2,imgsrc:cp1,name:"三红蜜柚",price:"29.9",beforeprice:"39.9",spec:"kg",time:1010,stock: 200},
          // {id:3,imgsrc:cp2,name:"香甜脆梨",price:"9.9",beforeprice:"14.9",spec:"kg",time:1001,stock:0},
          // {id:4,imgsrc:cp1,name:"三红蜜柚",price:"29.9",beforeprice:"39.9",spec:"kg",time:11017,stock:1000},
          // {id:5,imgsrc:cp2,name:"香甜脆梨",price:"9.9",beforeprice:"44.9",spec:"kg",time:118,stock:1000},
          // {id:6,imgsrc:cp1,name:"三红蜜柚",price:"29.9",beforeprice:"39.9",spec:"kg",time:0,stock:1000},
          // {id:7,imgsrc:cp2,name:"香甜脆梨",price:"9.9",beforeprice:"14.9",spec:"kg",time:10,stock:1000},
          // {id:8,imgsrc:cp1,name:"三红蜜柚",price:"29.9",beforeprice:"39.9",spec:"kg",time:101010,stock:1000}
        ],
      yugaoList:[
        {'imgsrc':yg1,'name':'凉山特产红樱桃','price':10.09,'beforeprice':19.99,'spec':'kg','time':'2018.06.30 10:00'},
        {'imgsrc':yg2,'name':'凉山香芒','price':8.09,'beforeprice':12.99,'spec':'kg','time':'2018.07.03 10:00'},
        {'imgsrc':yg1,'name':'凉山特产红樱桃','price':10.09,'beforeprice':19.99,'spec':'kg','time':'2018.07.14 14:00'}
      ]
    }
  },
  methods:{
    ievent(ev){
        this.sssid = ev.did;
        this.xsglist[ev.did].time = 0;
      },
      qgbtn:function(i){
        if(this.$store.state.dlzt!=1){
          this.$confirm('你还没有登录, 不能抢购', '提示', {
            confirmButtonText: '去登录',
            cancelButtonText: '先逛逛',
            type: 'warning'
          }).then(() => {
            this.$router.push({ path: '/login' })
          }).catch(() => {
                      
          });
        }else{
          this.$router.push({ name: 'limitDetail', query:{cpid: i} })
        }
      },
      getlist:function(){
        this.$http.get("/index.php/index/goods/TimeLimitList")
        .then(res => {
          // console.log(res)
          this.xsglist = res.data;
          console.log(this.xsglist)
        })
        .catch(error => {
          
        });
      }
  },
  components:{
    djs
  },
  created(){
    this.getlist();
  },
  watch:{
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.path == '/limit'){
                  this.getlist();
                }
              }
        }
}
</script>

<style scoped lang="less">
.limit{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
}
.preview{
  width: 100%;
  margin-top: 24px;
  height: auto;
  zoom: 1;
  overflow: hidden;
  .top{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    img{
      width: 100%;
      max-height: 122px;
    }
  }
  .box{
    zoom: 1;
    overflow: hidden;
    margin-top: 38px;
    height: 422px;
    position: relative;
    .item{
      width: 100%;
      height: 206px;
      .cont{
        width: 630px;
        height: 100%;
        float: right;
        .img{
          width: 382px;
          height: 100%;
          float: left;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .down-box{
          width: 248px;
          float: left;
          height: 100%;
          box-sizing: border-box;
          border: 2px solid #54b84c;
          .box-cont{
            padding: 0 14px; 
            .topp{
              width: 100%;
              height: auto;
              zoom: 1;
              overflow: hidden;
              .name{
                width: 100%;
                height: 46px;
                font-size: 18px;
                color: #131313;
                line-height: 46px;
                overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
              }
              .p1{
                font-size: 20px;
                color: #5bb756;
              }
              .p2{
                font-size: 14px;
                color: #959595;
                padding-top: 4px;
              }
            }
            .downn{
              width: 218px;
              height: 56px;
              margin: 32px auto 0;
              background: #e73236;
              color: #fff;
              text-align: center;
              font-size: 16px;
              line-height: 56px;
            }
          }
        }
      }
      &:first-child{
        position: absolute;
        left: 0;
        top: 0;
        width: 558px;
        height: 422px;
        .cont{
          width: 100%;
          height: 100%;
          .img{
            width: 100%;
            height: 294px;
            float: left;
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .down-box{
            width: 100%;
            height: 128px;
            .box-cont{
              padding: 0 14px; 
              .topp{
                width: 230px;
                float: left;
              }
              .downn{
                float: right;
              }
            }
          }
        }
      }
      &:last-child{
        margin-top: 10px;
      }
    }
  }
}
.time-limit{
  width: 100%;
  margin-top: 24px;
  height: auto;
  zoom: 1;
  overflow: hidden;
  .top{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    img{
      width: 100%;
      max-height: 122px;
    }
  }
}
.xsg-box{
      width: 1200px;
      height: 430px;
      margin: auto;
      margin-top: 40px;
      .list{
        float: left;
        width: 278px;
        height: 350px;
        margin-left: 29px;
        margin-top: 14px;
        &:nth-child(4n+1){
          margin-left: 0;
        }
        .img{
          width: 100%;
          height: 240px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .down{
          width: 100%;
          height: 110px;
          background: #eee;
          box-sizing: border-box;
          border: 1px solid #eee;
          .down-left{
            float: left;
            width: 176px;
            height: auto;
            zoom: 1;
            overflow: hidden;
            margin-left: 8px;
            .name{
              width: 100%;
              height: 28px;
              margin: 12px auto 0;
              font-size: 16px;
              color: #2a2a2a;
              line-height: 28px;
              overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
            }
            .price{
              width: 100%;
              height: 32px;
              margin: auto;
              p{
                font-size: 14px;
                color: #383838;
                span{
                  font-size: 22px;
                  color: #cf4040;
                }
                del{
                  padding-left: 4px;
                  color: #878787;
                  font-size: 12px;
                }
              }
            }
            .djs{
              display: table;
              height: 30px;
              margin-top: -2px;
            }
          }
          .qg-btn{
            display: block;
            width: 62px;
            height: 62px;
            border-radius: 100%;
            text-align: center;
            background: #f2404c;
            margin: 20px 22px 0 0;
            float: right;
            cursor: pointer;
            p{
              color: #fff;
              padding-top: 10px;
            }
          }
          .active{
            background:#aba5a5;
          }
        }
      }
    }
</style>
